<template>
  <div 
    :id="uuid"
    v-on-echart-resize="null"
    class="echart-container"
    ></div>
</template>

<script setup lang="ts">
import { onEchartResize as vOnEchartResize } from './resizeDirective'
import { createUUID, deepClone } from 'lib-utils'
import { ref, onMounted } from 'vue'
import echarts from './echartsUi'
const props = defineProps({
  options: {
    type: Object
  },
  xAxis: []
})
const uuid = ref(createUUID())
onMounted(() => {
  const dom: HTMLElement | null = document.getElementById(uuid.value) // 2 获取dom节点
  let customOption = deepClone(props.options)
  const barChart = echarts.init(dom as HTMLElement) // 3 初始化实例
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    grid: {
      x: 60,
      y: 60,
      x2: 60,
      y2: 60,
      backgroundColor: 'rgba(0,0,0,0)',
      borderWidth: 1,
      borderColor: '#ccc'
    },
    toolbox: {
      right: '30',
      feature: {
        magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    legend: {},
    xAxis: [],
    yAxis: [],
    series: []
  }
  let mergeOptions = Object.assign(deepClone(option), customOption)
  // 4 设置实例参数
  barChart.setOption(mergeOptions)
})
</script>

<style lang="less" scoped>
.echart-container {
  height: 400px;
  width: 100%;
}
</style>
